<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/register.css">
    <link rel="stylesheet" href="../css/indexiconfont.css">
    <style>

    </style>
</head>

<body>
    <div class="register">
        <!-- 主体框 -->
        <div class="registermain">
            <p class="regnav">
                <a href="javascript:;" class="on">快捷登录</a>
                <a href="javascript:;" class="">密码登录</a>
            </p>
            <div class="regmain">
                <!-- 快捷登录框 -->
                <div class="on">
                    <p class="regfirstp">您的手机号我们将严格保密!经纪人不会看到您的手机号。</p>
                    <p class="regbag">
                        <select id="group">
                            <option value="1">+86</option>
                            <option value="2">+852</option>
                            <option value="3">+853</option>
                            <option value="4">+886</option>  
                        </select>
                        <input type="text" class="regshuruk zcsjh" placeholder="请输入手机号码">
                    </p>

                    <p class="regpass">
                        <input type="password" placeholder="请输入密码" class="regyanz zcyzm">
                        <button class="reghq zchqyzm">点我现在注册</button>
                    </p>
                    <p class="regwty">
                        <input type="radio" class="zcchek">我同意
                        <a href="javascript:;">《Q房网服务协议》</a>及
                        <a href="javascript:;">《Q房网隐私协议》</a>
                    </p>
                    <p class="regdl">
                        <button class="regljdl zcdl" id="zcdla">立即登录</button>
                    </p>
                </div>
                <!-- 密码登录框 -->
                <div class="">
                    <p class="regfirstp"></p>
                    <p class="regbag">
                        <select id="groupa">
                            <option value="1">+86</option>
                            <option value="2">+852</option>
                            <option value="3">+853</option>
                            <option value="4">+886</option>  
                        </select>
                        <input type="text" class="regshuruk dlsjh" placeholder="请输入手机号码">
                    </p>
                    <p class="regpass">
                        <input type="password" placeholder="请输入密码" class="regyanz regmimak dlyzm">
                        <i class="iconfont icon-xiaoyanjing-zheng"></i>
                        <i class="iconfont icon-xiaoyanjing-bi"></i>
                    </p>
                    <p class="regwty">
                        <input type="radio" class="dlcheka">我同意
                        <a href="javascript:;">《Q房网服务协议》</a>及
                        <a href="javascript:;">《Q房网隐私协议》</a>
                        <a href="javascript:;" class="wjmma">忘记密码</a>
                    </p>
                    <p class="regdl">
                        <button class="regljdl dldl" id="dldla">立即登录</button>
                    </p>
                </div>
                <div class="weitdl">
                    <a href="javascript:;"><i class="iconfont icon-weixin"></i></a>
                </div>
                <div class="alertDiv"></div>
            </div>
        </div>
    </div>
    <script src="../js/ajax.js"></script>
    <script src="../js/jquery.1.9.1.js"></script>
    <script>
        let aa = document.querySelectorAll('.regnav a')
        let adiv = document.querySelectorAll('.regmain div')
        aa.forEach((ele, index) => {
            ele.addEventListener('click', () => {
                for (var i = 0; i < aa.length; i++) {
                    aa[i].className = ''
                    adiv[i].className = ''
                }
                ele.className = 'on'
                adiv[index].className = 'on'
            })
        })

        var checked = checked

        // 快捷登录页
        var oCheckbox = document.querySelector('.zcchek') //注册页单选按钮
        var oEmail = document.querySelector('.zcsjh') //手机号输入框
        var oPassword = document.querySelector('.zcyzm') //密码输入框
        var oLogin = document.querySelector('.zcdl') //登录按钮
        var alertDiv = document.querySelector('.alertDiv') //提示框
        var zcxlk = document.querySelector('#group') //注册获取下拉框的值
        var reEmail = /^[1]([3-9])[0-9]{9}|(admin)$/ //正则
        oLogin.addEventListener('click', function() {
            // console.log(zcxlk.options[zcxlk.selectedIndex].text); //打印下拉框当前选中的值
            if (oCheckbox.checked == false) {
                alertDiv.style.display = 'flex'
                alertDiv.innerHTML = '请先勾选我已阅读'
                alertDiv.className = 'alertDiv no'
                setTimeout(function() {
                    alertDiv.style.display = 'none'
                }, 1000)
                return
            }

            // 注册页登录
            oLogin.style.background = '#fed243'
            if (oEmail.value === '' || oPassword.value === '') {
                alertDiv.style.display = 'flex'
                alertDiv.innerHTML = '用户名密码不能为空'
                alertDiv.className = 'alertDiv no'
                setTimeout(function() {
                    alertDiv.style.display = 'none'
                }, 1000)
                return
            }
            //如果不为空的时候
            if (reEmail.test(oEmail.value) === true) {
                ajax({
                    // 接口地址
                    url: '../../php/login.php',
                    // 请求方式
                    type: 'post',
                    // 字段
                    data: {
                        username: oEmail.value,
                        password: oPassword.value
                    },
                    success(res) {
                        let json = JSON.parse(res)
                        alertDiv.style.display = 'flex'
                        alertDiv.innerHTML = json.msg
                            // 判断是否登陆成功
                        if (json.code === true) {
                            alertDiv.className = 'alertDiv yes'
                            localStorage.setItem('username', oEmail.value) //存储账户信息
                            window.parent.location.reload(); //刷新父页面
                            parent.layer.close(); //关闭弹出层
                        } else {
                            alertDiv.className = 'alertDiv no'
                            setTimeout(function() {
                                alertDiv.style.display = 'none'
                            }, 2000)
                        }
                    }
                })
            } else {
                //如果输入框为空的时候
                alertDiv.style.display = 'flex'
                alertDiv.innerHTML = '邮箱不符合规则'
                alertDiv.className = 'alertDiv no'
                setTimeout(function() {
                    alertDiv.style.display = 'none'
                }, 1000)
            }
        })

        //密码登录页
        var oEmaila = document.querySelector('.dlsjh') //手机号输入框
        var oPassworda = document.querySelector('.dlyzm') //密码输入框
        var oLogina = document.querySelector('#dldla') //登录按钮
        var oCheckboxa = document.querySelector('.dlcheka') //登录页单选按钮
        var zcxlka = document.querySelector('#groupa') //注册下拉框的值
        oLogina.addEventListener('click', function() {
            // console.log(zcxlka.options[zcxlka.selectedIndex].text); //打印下拉框的值
            if (oCheckboxa.checked == false) {
                alertDiv.style.display = 'flex'
                alertDiv.innerHTML = '请先勾选我已阅读'
                alertDiv.className = 'alertDiv no'
                setTimeout(function() {
                    alertDiv.style.display = 'none'
                }, 1000)
                return
            }
            oLogina.style.background = '#fed243'
                //密码登录
            var reEmail =  /^[1]([3-9])[0-9]{9}|(admin)$/ //正则
            if (oEmaila.value === '' || oPassworda.value === '') {
                alertDiv.style.display = 'flex'
                alertDiv.innerHTML = '用户名密码不能为空'
                alertDiv.className = 'alertDiv no'
                setTimeout(function() {
                    alertDiv.style.display = 'none'
                }, 1000)
                return
            }
            //如果不为空的时候
            if (reEmail.test(oEmaila.value) === true) {
                if (oEmaila.value == 'admin' && oPassworda.value == 'admin') location.href = 'backstage.html'
                ajax({
                    // 接口地址
                    url: '../../php/login.php',
                    // 请求方式
                    type: 'post',
                    // 字段
                    data: {
                        username: oEmaila.value,
                        password: oPassworda.value
                    },
                    success(res) {
                        let json = JSON.parse(res)
                        alertDiv.style.display = 'flex'
                        alertDiv.innerHTML = json.msg
                        console.log(res)
                            // 判断是否登陆成功
                        if (json.code === true) {
                            alertDiv.className = 'alertDiv yes'
                            localStorage.setItem('username', oEmaila.value) //存储账户信息
                            window.parent.location.reload(); //刷新父页面
                            parent.layer.close(); //关闭弹出层
                        } else {
                            alertDiv.className = 'alertDiv no'
                            setTimeout(function() {
                                alertDiv.style.display = 'none'
                            }, 2000)
                        }
                    }
                })
            } else {
                //如果输入框为空的时候
                alertDiv.style.display = 'flex'
                alertDiv.innerHTML = '邮箱不符合规则'
                alertDiv.className = 'alertDiv no'
                setTimeout(function() {
                    alertDiv.style.display = 'none'
                }, 1000)
            }
        })

        // 注册
        var azchqyzm = document.querySelector('.zchqyzm') //现在注册按钮
        let resjh =  /^[1]([3-9])[0-9]{9}|(admin)$/ //正则手机号
        azchqyzm.addEventListener('click', function() {
            if (resjh.test(oEmail.value) === true && resjh.test(oPassword.value) === true) {
                ajax({
                    url: '../../php/regter.php',
                    type: 'post',
                    data: {
                        username: oEmail.value,
                        password: oPassword.value
                    },
                    success(res) {
                        var oyzc = JSON.parse(res).msg
                        var bcolor = JSON.parse(res).bcolor
                        alertDiv.style.display = 'flex'
                        alertDiv.style.background = bcolor
                        alertDiv.innerHTML = oyzc
                        setTimeout(function() {
                            alertDiv.style.display = 'none'
                        }, 2000)
                    }
                })
            } else {
                alertDiv.style.display = 'flex'
                alertDiv.innerHTML = '你输入的内容不符合规范'
                alertDiv.className = 'alertDiv no'
                setTimeout(function() {
                    alertDiv.style.display = 'none'
                }, 2000)
            }
        })
    </script>
</body>

</html>